<template>
    <div class="vue-table-container">
        <div class="table-container">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>手机号</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody v-for="item in tableList">
                    <tr>
                        <td>{{item.id + 1}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.mobile}}</td>
                        <td class="col-xs-3">
                            <Tooltip content="重新发送" placement="top">
                                <i-button type="text"
                                          v-on:click="sendMsg(item.mobile,item.name,item.school, item.section, item.status, item.date, item.ableschool)"
                                          :disabled="stateManager.buttonLoading">
                                    <Icon type="ios-chatboxes" size="16"></Icon>
                                </i-button>
                            </Tooltip>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!--<div class="widget-toolbox padding-10 clearfix">-->
            <!--<pagination :page-count="dataSource.pageCount"-->
                        <!--:total="dataSource.total"-->
                        <!--:current-page="dataSource.currentPage" @goPage="goPage"></pagination>-->
        <!--</div>-->
    </div>
</template>


<script>
    import SmsApi from '../../../api/sms/sms'
  export default {
    props: {
      stateManager: {
        type: Object
      },
      tableList:{}
    },
    data: function () {
      return {

      };
    },
    methods: {
        sendMsg: function (mobile, name, school, section, status, date, ableschool) {
          let self = this;
          SmsApi.postSendMsg(mobile, name, school, section, status, date, ableschool)
            .then(res => {
              self.$Notice.success({
                title: '短信已发送',
              })
              self.tableList.map((item,index)=>{
                if (item.mobile === mobile) {
                  self.tableList.splice(index, 1)
                }
              })
            })
            .catch(err=>{
              self.$Notice.error({
                title: '短信发送失败',
              })
          })
        }
    }
  }
</script>
<style lang="scss">
    .search-box {
        /*width: 90%;*/
        height: auto;
        margin: 15px auto;
        .col {
            padding-left: 0;
        }
        .col-auto {
            padding-right: 0;
        }
    }

    .table-container {
        text-align: center;
        font-size: 13px;
        .table {
            th, td {
                padding: 0.5rem;
                vertical-align: middle !important;
            }
        }
    }
</style>